<!DOCTYPE html>
<html lang="zxx">

<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>欢迎登录</title>

    <!-- Fav Icons -->
    <link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">

    <!-- Stylesheets -->
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/responsive.css">

</head>

<body>
    <div class="page-wrapper" id="index">

        <!-- Preloader -->
        <div class="preloader"></div>



        <!--====================================================================
                                Start Header area
        =====================================================================-->
        <header class="main-header">
            <div class="container">
                <div class="header-inner">
                    <div class="logo">
                        <a href="index.html"><img src="assets/img/logo.png" alt="Main Logo"></a>
                    </div>

                    <div class="categories">
                        <button><i class="flaticon-list"></i>
                        <span>商品分类</span></button>
                        <ul>
                            <li v-for="(classify,i) in classifyList"><a :href="'shop.html?id='+classify.id" ><i class="flaticon-chicken-hand-drawn-outline"></i> {{classify.classifyName}}</a></li>
                            <!-- <li><a href="shop.html"><i class="flaticon-chicken-hand-drawn-outline"></i> 家禽</a></li>
                            <li><a href="shop.html"><i class="flaticon-pressure-washer"></i> 粗粮</a></li>
                            <li><a href="shop.html"><i class="flaticon-pest"></i> Pest Control</a></li>
                            <li><a href="shop.html"><i class="flaticon-stationery"></i> Office Products</a></li>
                            <li><a href="shop.html"><i class="flaticon-make-up"></i> Beauty Products</a></li>
                            <li><a href="shop.html"><i class="flaticon-first-aid-kit"></i> Health Products</a></li>
                            <li><a href="shop.html"><i class="flaticon-track"></i>水产</a></li>
                            <li><a href="shop.html"><i class="flaticon-sketch"></i> 手工艺品</a></li>
                             <li><a href="shop.html"><i class="flaticon-baby-boy"></i> Baby Care</a></li> -->
                        </ul>
                    </div>

                    <form action="#" class="menu-search">
                        <!-- <select name="select-category">
                            <option value="option-1">All Categories</option>
                            <option value="option-2">Fruits and Vegetables</option>
                            <option value="option-3">Meat and Fish</option>
                            <option value="option-4">Home and Cleaning</option>
                            <option value="option-5">Pest Control</option>
                            <option value="option-6">Office Products</option>
                            <option value="option-7">Beauty Products</option>
                            <option value="option-8">Health Products</option>
                            <option value="option-9">Pet Care</option>
                            <option value="option-10">Home Appliances</option>
                            <option value="option-11">Baby Care</option>
                        </select> -->
                        <input type="search"  required>
                        <button type="submit" style="width: 150px;">搜索</button>
                    </form>

                    <div class="menu-collections">
                        <!-- <div class="collection-item watch">
                            <i class="flaticon-heart"></i>
                            <div class="collection-inner">
                                <div class="alert single-collection">
                                    <button data-dismiss="alert"><i class="flaticon-delete-button"></i></button>
                                    <div class="collection-image">
                                        <img src="assets/img/shop/cart-1.png" alt="">
                                    </div>
                                    <div class="collection-content">
                                        <p>Danish Full Cream Milk</p>
                                        <h6>$120.00</h6>
                                    </div>
                                </div>
                                <div class="alert single-collection">
                                    <button data-dismiss="alert"><i class="flaticon-delete-button"></i></button>
                                    <div class="collection-image">
                                        <img src="assets/img/shop/cart-2.png" alt="">
                                    </div>
                                    <div class="collection-content">
                                        <p>Healthy Yellow Papaya</p>
                                        <h6>$120.00</h6>
                                    </div>
                                </div>
                                <div class="collection-btn">
                                    <a href="cart.html" class="theme-btn bg-blue no-shadow mx-auto">Add to Cart</a>
                                </div>
                            </div>
                        </div> -->
                        <!-- <div class="collection-item cart">
                            <i class="flaticon-shopping-cart"></i>
                            <div class="collection-inner">
                                <div class="alert single-collection">
                                    <button data-dismiss="alert"><i class="flaticon-delete-button"></i></button>
                                    <div class="collection-image">
                                        <img src="assets/img/shop/cart-1.png" alt="">
                                    </div>
                                    <div class="collection-content">
                                        <p>Danish Full Cream Milk</p>
                                        <h6>$120.00</h6>
                                    </div>
                                </div>
                                <div class="alert single-collection">
                                    <button data-dismiss="alert"><i class="flaticon-delete-button"></i></button>
                                    <div class="collection-image">
                                        <img src="assets/img/shop/cart-2.png" alt="">
                                    </div>
                                    <div class="collection-content">
                                        <p>Healthy Yellow Papaya</p>
                                        <h6>$120.00</h6>
                                    </div>
                                </div>
                                <div class="collection-btn">
                                    <a href="cart.html" class="theme-btn bg-blue no-shadow mr-10">View Cart</a>
                                    <a href="checkout.html" class="theme-btn ml-auto no-shadow">Checkout</a>
                                </div>
                            </div>
                        </div> -->
                        <div class="collection-item profile">
                            <i class="flaticon-user-1"></i>
                            <div class="collection-inner">
                                <ul>
                                    <li><a href="cart.html">购物车</a></li>
                                    <li><a href="user.html">用户中心</a></li>
                                    <!-- <li v-if="islogin"><a href="sign-in.html">登录</a></li> -->
                                    <!-- <li><a href="sign-up.html">Sign Up</a></li> -->
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- <div class="main-menu">
                        <button><i class="flaticon-list-menu"></i></button>
                        <ul>
                            <li><a href="index.html">Home</a></li>
                            <li class="dropdown"><a href="#">Blog</a>
                                <ul>
                                    <li><a href="blog.html">All Blog</a></li>
                                    <li><a href="blog-details.html">Blog Details</a></li>
                                </ul>
                            </li>
                            <li class="dropdown"><a href="#">Shop</a>
                                <ul>
                                    <li><a href="shop.html">Shop Page</a></li>
                                    <li><a href="shop-details.html">Shop Details</a></li>
                                    <li><a href="cart.html">Cart Page</a></li>
                                    <li><a href="checkout.html">Checkout</a></li>
                                </ul>
                            </li>
                            <li class="dropdown"><a href="#">Pages</a>
                                <ul>
                                    <li><a href="sign-in.html">Sign In</a></li>
                                    <li><a href="sign-up.html">Sign Up</a></li>
                                </ul>
                            </li>
                            <li><a href="contact.html">Contact</a></li>
                        </ul>
                        <div class="menu-overlay"></div>
                    </div> -->
                </div>
            </div>
            <div class="collection-close"></div>
        </header>
        <!--====================================================================
                                End Header area
        =====================================================================-->



        <!--====================================================================
            Start Banner Section
        =====================================================================-->
        <!-- <section class="banner-section" style="background-image:url(assets/img/banner.jpg);">
            <div class="container">
                <div class="banner-inner text-center">
                    <h2 class="page-title">Login</h2>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Login</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </section> -->
        <!--====================================================================
            End Banner Section
        =====================================================================-->


        <section class="login-area my-120 rmy-80">
            <div class="container">
                <div class="row">
                    <div class="col-lg-5 pr-0 rpr-15 rmb-80">
                        <div class="login-information bg-white br-5">
                            <div class="login-info-inner">
                                <h2>欢迎登录</h2>
                                <form action="#" class="login-form">
                                    <div class="email-field">
                                        <label for="email">手机号码*</label>
                                        <input type="text" v-model="form.inputName" id="email" >
                                    </div>
                                    <div class="password-field">
                                        <label for="pass">验证码*</label>
                                        <input type="text" v-model="form.inputPwd" id="pass" >
                                    </div>
									<div class="share-btn-wrap" style="margin:10px 0px;">
									    <div class="facebook-btn">
									        <!-- <a href="#" :disabled="getSmsButton" @click="getVerifyCode()" ><span>{{timer || "获取验证码"}}</span></a> -->
											<button @click="getVerifyCode()" :disabled="getSmsButton" >{{timer || "获取验证码"}}</button>
									    </div>
									    <!-- <div class="google-btn">
									        <a href="#"><i class="fa fa-google"></i><span>Google</span></a>
									    </div> -->
									</div>
                                    <!-- <div class="alternative-login">
                                        <span><a href="#">Forget Password</a></span>
                                        <span>Don't Have Account ?<a class="signup-link" href="#">Sign Up</a></span>
                                    </div> -->
                                    <div class="signin-button-wrap">
                                        <button type="button" @click="dologin()" class="btn-bg2">登录</button>
                                    </div>

                                </form>
                                <!-- <div class="or-text">or you can join with</div> -->

                            </div>
                        </div>
                    </div>
                    <div class="col-lg-7 px-0 rpl-15">
                        <div class="login_img bg-white">
                            <img src="assets/img/log-in.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <!--====================================================================
                            Start footer section
        =====================================================================-->
        <footer class="footer bg-black pt-100 text-lg-left text-center">
            <div class="container">
                <div class="row">
        
                    <!--Footer Column-->
                    <div class="col-lg-3 col-md-12 mb-30">
                        <div class="footer-widget logo-widget mr-20">
                            <div class="footer-logo">
                                <a href="index.html"><img src="assets/img/logo.png" alt="footer logo"></a>
                            </div>
                            <p>坚持农业农村优先发展，要推动城乡融合发展。破解城乡发展不平衡不协调的矛盾，必须打破城乡二元的制度藩篱，重塑城乡关系，让广大农民平等参与现代化进程。</p>
                           <!-- <div class="footer-social-icon">
                                <ul class="social-style-one">
                                    <li><a href="#"><i class="fa fa-facebook-f"></i></a></li>
                                    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                    <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                                    <li><a href="#"><i class="fa fa-instagram"></i></a></li>
                                </ul>
                            </div> -->
                        </div>
                    </div>
        
                    <!--Footer Column-->
                    <div class="col-lg-2 col-md-3 mb-30">
                        <div class="footer-widget links-widget float-lg-right mr-40">
                            <h5 class="footer-title mb-30">快捷导航</h5>
                            <ul class="list">
                                <li><a href="index.html">主页</a></li>
                                <li><a href="shop.html">商品</a></li>
                                <li><a href="sign-in.html">登录</a></li>
                                <!-- <li><a href="#">CONTACT</a></li> -->
                            </ul>
                        </div>
                    </div>
        
                    <!--Footer Column-->
                    <div class="col-lg-4 col-md-5 mb-30">
                        <div class="footer-widget form-widget ml-115 mr-30">
                            <h5 class="footer-title mb-30">坚持农业农村优先发展</h5>
                            <p>中央农村工作会议日前在北京举行。会议研究部署了坚持农业农村优先发展的政策措施，是事关脱贫攻坚和乡村振兴的又一次重要会议。明后两年是全面建成小康社会的关键时期，是打赢脱贫攻坚战和实施乡村振兴战略的历史交汇期，做好“三农”工作具有重大意义。会议为做好明后两年“三农”工作确定了基调，为加快实施乡村振兴战略指明了方向，是推进“三农”事业的响鼓重槌。</p>
                            <!-- <form class="subscribe">
                                <input type="email" placeholder="Your Email For Notify" required>
                                <button type="submit">Send</button>
                            </form> -->
                        </div>
                    </div>
        
                    <!--Footer Column-->
                    <div class="col-lg-3 col-md-4 mb-30">
                        <div class="footer-widget pament-widget">
                            <h5 class="footer-title mb-30">Payment</h5>
                            <ul class="list">
                                <li><a href="#"><img src="assets/img/pay-method/visa.png" alt=""></a></li>
                                <li><a href="#"><img src="assets/img/pay-method/mastercard.png" alt=""></a></li>
                                <li><a href="#"><img src="assets/img/pay-method/discover.png" alt=""></a></li>
                                <li><a href="#"><img src="assets/img/pay-method/americanexpress.png" alt=""></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
        
                        <!-- Copyright Area-->
                        <div class="copyright text-center pl-10 pr-10 pt-30 pb-10 mt-55 rmt-35 mb-65">
                            <p>Copyright &copy; 2020.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
                        </div>
        
                    </div>
                </div>
        
            </div>
        </footer>
        <!--====================================================================
                                End footer section
        =====================================================================-->


    </div>
    <!--End pagewrapper-->


    <!-- Scroll Top Button -->
    <button class="scroll-top scroll-to-target" data-target="html"><span class="fa fa-angle-up"></span></button>


    <!-- jequery plugins -->
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap-v4.1.3.min.js"></script>
    <script src="assets/js/jquery.nice-select.min.js"></script>
    <script src="assets/js/jquery.simpleLoadMore.min.js"></script>
    <script src="assets/js/slick.min.js"></script>
    <script src="assets/js/appear.js"></script>

    <!-- Custom script -->
    <script src="assets/js/script.js"></script>
    <script src="assets/js/vue.js"></script>
    <script src="assets/js/axios.min.js"></script>

</body>

</html>
    <script>
        var t;
        new Vue({
            el:'#index',
            data:{
                classifyList:[],
				timer: false, //倒计时
				getSmsButton: false,
				form: {
				         inputName: "", //用户手机号或账号
				         inputPwd: "" //用户验证码或密码
				       },//获取短信验证码状态
				user:{}	   
            },
            methods:{
				countDown:function(totalTime, fn, endFn) {
				  let time = null;
				  time = setInterval(() => {
				    totalTime--;
				    fn(totalTime);
				    if (!totalTime) {
				      endFn();
				      clearInterval(time);
				    }
				  }, 1000);
				},
				countDownStart:function() {
				      t.getSmsButton = true;
				      t.timer = 60 + "s";
				      t.countDown(
				        60,
				        res => (t.timer = res + "s"),
				        () => {
				          t.timer = false;
				          t.getSmsButton = false;
				        }
				      );
				    },
				 getVerifyCode:function() {
				      t.countDownStart();
				      $.get('http://127.0.0.1:8082/api/sms/verifyCode',{phone:t.form.inputName,codeType:0},function(resp){
						  console.log(resp);
					  })
				    },
				dologin:function(phone,sms){
					$.get('http://localhost:8082/login/sms',{phone:t.form.inputName,sms:t.form.inputPwd},function(resp){
						console.log(resp);
						t.uesr=resp.data;
						console.log("user:"+t.uesr);
						if(resp.data!=null){
							window.sessionStorage.setItem('user',JSON.stringify(resp.data));
							// window.location='index.html';
							history.go(-1);
						}
					})
				},
                classfiyLoad:function(){
                    $.get('http://192.168.1.19:8080/products/getClassify',function (resp) {
                        console.log("*****类别*****");
                        t.classifyList=resp.data.list;
                        console.log(t.classifyList);
                    })
                }
            },
            mounted:function(){
                t=this;
                this.classfiyLoad();
            }
        })
    </script>
